<template>
  <view>
    <p class ="tagsBox" :style="{'border':border }" :class="{'active':active}">
      <slot></slot>
      <u-icon
        v-if="isIcon"
        name="close"
        color="#969799"
        size="20"
        style="margin-left: 22rpx; transform: translateY(-15%);"
        @click="close"
      ></u-icon>
    </p>
  </view>
</template>
<script>
/**
 * @param isIcon 是否展示close图标
 * @param border 边框样式
 * @param active 是否开启点击tag样式
 */
export default {
  name: '',
  props: {
    isIcon:{
        type:String | Boolean,
        default:false
    },
    border:{
        type:String ,
        default: '2rpx solid #DCDDE1;'
    },
    active:{
        type:String | Boolean,
        default:false
    }
  },
  components: {},
  data() {
    return {}
  },
  computed: {
  },
  methods: {
    close(){
      this.$emits('close')
    }
  }
}
</script>
<style  lang='scss' scoped>
.tagsBox {
  display: inline-block;
  background: #ffffff;
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #323233;
  padding: 10rpx 24rpx;
  border-radius: 12rpx ;
  margin: 0 10rpx 10rpx 0;
}
.active{
background: #F2F3FF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
border: 2rpx solid #0052D9;
color: #0052D9;
line-height: 44rpx;
}
</style>